<template>
  <div class="department-container">
    <div class="app-container">
      <el-card>
        <!-- 用一个行列布局 -->
        <el-row type="flex" justify="space-between" align="middle" style="height: 40px">
          <el-col :span="20">
            <span>江苏传智播客教育科技股份有限公司</span>
          </el-col>
          <el-col :span="4">
            <el-row type="flex" justify="end">
              <!-- 两个内容 -->
              <el-col>负责人</el-col>
              <el-col>操作</el-col>
            </el-row>
          </el-col>
        </el-row>
        <!-- ----------------这里是树形组件------------------ -->
        <!-- props是自定义识别字段 -->
        <!-- default-expand-all是默认展开这个树形数据 -->
        <el-tree :data="list" :props="defaultProps" :default-expand-all="true">
          <!-- 这里我们使用作用域插槽 -->
          <!-- data就是作用域插槽抛出的参数，是每一个子节点的对象 -->
          <template #default="{ data }">
            <el-row
              type="flex"
              justify="space-between"
              align="middle"
              style="height: 40px; width: 100%"
            >
              <el-col :span="20">
                <span>{{ data.name }}</span>
              </el-col>
              <el-col :span="4">
                <el-row type="flex" justify="end">
                  <!-- 两个内容 -->
                  <el-col>{{ data.manager }}</el-col>
                  <el-col>
                    <!-- 下拉菜单 element -->
                    <el-dropdown>
                      <span> 操作<i class="el-icon-arrow-down" /> </span>
                      <el-dropdown-menu slot="dropdown">
                        <el-dropdown-item
                          @click.native="AddDialog(data.id)"
                        >添加子部门</el-dropdown-item>
                        <el-dropdown-item
                          @click.native="EditDialog(data.id)"
                        >编辑部门</el-dropdown-item>
                        <el-dropdown-item @click.native="DelDialog(data.id)">删除部门</el-dropdown-item>
                      </el-dropdown-menu>
                    </el-dropdown>
                  </el-col>
                </el-row>
              </el-col>
            </el-row>
          </template>
        </el-tree>
      </el-card>
    </div>
    <!-- ----------------弹框 -->
    <!-- 这里加个close关闭发生的回调和open打开发生的回调 -->
    <el-dialog
      title="提示"
      :visible="dialogVisible"
      width="30%"
      @close="closeDialog"
      @open="openDialog"
    >
      <!-- 默认作用域插槽 -->
      <template #default>
        <!-- 表单校验 :model绑定表单对象，:rules绑定规则对象 -->
        <el-form ref="deptForm" :model="form" :rules="rules" label-width="120px">
          <el-form-item label="部门名称" prop="name">
            <!-- 双向绑定表单中的数据 -->
            <el-input v-model="form.name" style="width: 80%" placeholder="1-50个字符" />
          </el-form-item>
          <el-form-item label="部门编码" prop="code">
            <el-input v-model="form.code" style="width: 80%" placeholder="1-50个字符" />
          </el-form-item>
          <el-form-item label="部门负责人" prop="manager">
            <!-- 这里是一个下拉框 -->
            <el-select v-model="form.manager" style="width: 80%" placeholder="请选择">
              <el-option
                v-for="item in managerList"
                :key="item.id"
                :label="item.username"
                :value="item.username"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="部门介绍" prop="introduce">
            <el-input
              v-model="form.introduce"
              style="width: 80%"
              placeholder="1-300个字符"
              type="textarea"
              :rows="3"
            />
          </el-form-item>
        </el-form>
      </template>
      <!-- 具名作用域插槽，是element给我们写好的 -->
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="Submit">确 定</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script>
// 引入api接口
import { getDepartmentAPI, getManagerAPI, addDepartmentAPI, getDepartDetailAPI, updateDepartmentAPI, delDepartmentAPI } from '@/api/departments'
// 引入树形数组结构
import transTree from '@/utils/transTree'
export default {
  name: 'Department',
  data() {
    return {
      // 数组，而且必须是树形数据，树形数据就是一个数据下面还有数据
      list: [],
      // 因为后端给我们的不一定叫label叫name，可以通过这个参数进行定制，所以我们把它修改一下
      defaultProps: {
        label: 'name',
        children: 'children'
      },
      // 控制弹框打开，默认false
      dialogVisible: false,
      // 根据接口准备好表单对象
      form: {
        name: '', // 部门名称
        code: '', // 部门编码
        manager: '', // 部门负责人
        introduce: '', // 部门介绍
        pid: '' // 表示要给谁增子部门,之后我们自己处理
      },
      // 根据接口准备好规则对象
      rules: {
        name: [
          { required: true, message: '部门名称不能为空', trigger: 'blur' },
          { min: 1, max: 50, message: '部门名称要求1-50个字符', trigger: ['blur', 'change'] }
        ],
        code: [
          { required: true, message: '部门编码不能为空', trigger: 'blur' },
          { min: 1, max: 50, message: '部门编码要求1-50个字符', trigger: ['blur', 'change'] }
        ],
        manager: [
          // 注意manager是下拉框，所以我们加上change，当发生改变的时候
          { required: true, message: '部门负责人不能为空', trigger: ['blur', 'change'] }
        ],
        introduce: [
          { required: true, message: '部门介绍不能为空', trigger: 'blur' },
          { min: 1, max: 300, message: '部门介绍要求1-300个字符', trigger: ['blur', 'change'] }
        ]
      },
      // 准备好负责人列表的数据项
      managerList: []
    }
  },
  // 生命周期函数，用created也可以
  mounted() {
    // 调用下面的方法渲染数据到页面
    this.getList()
  },
  methods: {
    // 获取组织架构的数据调用api并赋值给list
    async getList() {
      const res = await getDepartmentAPI()
      // 数据处理，我们需要把扁平的数据转成树形的结构
      this.list = transTree(res.depts)
    },
    // 添加子部门---点击事件
    AddDialog(id) {
      this.dialogVisible = true
      // 在这里我们处理pid这个数据项,不管哪一项都会把当前项的id记录到pid的位置
      this.form.pid = id
    },
    // 关闭弹框---close只要关闭就会自动执行的回调
    closeDialog() {
      this.dialogVisible = false
      // 清除里面的数据
      this.$refs.deptForm.resetFields()
    },
    // 打开弹框---open只要打开就会自动执行的回调
    async openDialog() {
      //  在这里我们调用api接口--渲染负责人列表
      const res = await getManagerAPI()
      this.managerList = res
    },
    // 整体表单校验（兜底校验）---点击提交
    Submit() {
      // 先用validate方法校验整个表单
      this.$refs.deptForm.validate(async(valid) => {
        if (valid) {
          // 由于编辑和新增部门都需要用到Submit这个提交，所以我们在这里判断，然后调用不同的接口
          // 如何判断？我们发现编辑比新增多了一个id，所以判断是否有id
          if (this.form.id) {
            // 调用api接口--修改部门
            await updateDepartmentAPI(this.form)
          } else {
            // 调用api接口--新增部门
            await addDepartmentAPI(this.form)
          }
          this.$message.success(`${this.form.id ? '编辑成功' : '新增成功'}`) // 提示,这里我们利用三元写一个判断
          this.dialogVisible = false // 关闭弹框
          this.getList() // 重新获取部门列表数据
          this.$refs.deptForm.resetFields() // 重置表单
          // 由于resetFields方法有点坑，所以这里我们再写一个方法补充一下
          this.form = {
            form: {
              name: '',
              code: '',
              manager: '',
              introduce: '',
              pid: ''
            }
          }
        }
      })
    },

    // 修改部门详情---点击事件
    async EditDialog(id) {
      // 调用api接口--获取部门详情,进行数据回填
      const res = await getDepartDetailAPI(id)
      this.form = res
      // 打开弹框
      this.dialogVisible = true
    },
    // 删除部门详情---点击事件
    DelDialog(id) {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async() => {
        // 这里调用api接口--删除部门详情
        await delDepartmentAPI(id)
        // 提示
        this.$message.success('删除成功!')
        // 重新渲染页面
        this.getList()
      }).catch(() => {

      })
    }
  }
}
</script>
